<template>
	<view>
		<uni-list>
			<!-- 提示:列表项默认是无法点击的(不能触发click事件)--除非具备点击反馈,方法1.clickable -->
			<uni-list-item v-for="{lid,title,pic,price,is_onsale,sold_count} in products" :key="lid" title="" @click="goToDetails(lid)" clickable="">
				<!-- 左侧插槽:放置大型图片 -->
				<view class="" slot="header">
					<image class="icon" :src="base+pic" mode="widthFix"></image>
				</view>
				<!-- 中部插槽:放置标题+价格+好评率 -->
				<view class="" slot="body">
					<text class="title">{{title}}</text>
					<text class="price">￥{{price}}</text>
					<view class="bottom">
						<uni-tag class="tag" v-if="is_onsale==1" text="促销" type="error"></uni-tag>
						<text>{{sold_count}}条热销评论,100%好评</text>
					</view>
				</view>
			</uni-list-item>
		</uni-list>
		<!-- 加载更多 -->
		<uni-load-more :status="isLoading ? 'loading' : (pageNum<pageCount? 'more' : 'nomore')">加载更多</uni-load-more>
	</view>
</template>

<script>
	import {
		base,
		productList
	} from '../../service'
	export default {
		onLoad({
			kw,
			bname
		}) {
			//1.读取上一个页面传递来的路由参数
			//2.如果路由参数存在bname,修改当前页面的标题为该品牌名称
			if (bname) {
				uni.setNavigationBarTitle({
					title: bname + '馆'
				})
			}
			//3.如果路由参数中存在kw,则记录下来;否则设置kw为空字符串
			if (kw) {
				this.kw = kw
			}
			//4.加载符合条件的第一条数据
			this.loadNextPageData()
		},
		//生命周期方法--在页面底部触发
		onReachBottom() {
			//注意:此事件的触发,受pafes.json中的"onReachBottom"
			this.loadNextPageData()
		},
		//生命周期方法--在页面顶部下拉刷新
		onPullDownRefresh() {
			//1.清除已经加载的数据
			this.products = []   //清除已经加载的商品数据
			this.pageNum = 0     //重新从第0+1页开始加载
			this.pageCount = 999  //总页数恢复带初始值
			//2.重新加载第一页数据
			this.loadNextPageData()
			//3.停止顶部页面的"加载"动画
			uni.stopPullDownRefresh()
		},
		data() {
			return {
				base: base,
				kw: '', //列表页必须变量1:  要显示的商品关键字
				products: [], //列表页必须变量2:查询到的所有商品
				pageNum: 0, //列表页必须变量3:当前加载到哪一页数据
				pageCount: 999, //列表页必须变量4:满足条件的商品总共分为多少页
				//注意:此处总页数没有初始化为0,而是一个大数,表示"还有更多数据 可供加载"
				isLoading: false, //列表页必须变量5:当前是否正在加载数据,如果是真则不再发送请求
			}
		},
		methods: {
			//列表页必需的方法:加载下一页数据
			async loadNextPageData() {
				//1.如果当前正在加载数据,或者没有更多数据了,则退出
				if (this.isLoading || this.pageNum >= this.pageCount) {
					return
				}
				//2.设定"当前正在加载数据"为真
				this.isLoading = true
				//3.异步请求服务器端接口数据,获得的数据
				let body = await productList(this.pageNum + 1, this.kw)
				this.pageNum = body.pno //当前加载到的页号
				this.pageCount = body.pageCount //可供加载的数据总页数
				this.products = [...this.products, ...body.data] //本次加载到的商品数据
				//4.设定"当前正在加载数据"为假
				this.isLoading = false
			},
			goToDetails(num){
				//跳转到商品详情页,并携带路由参数:商品编号
				uni.navigateTo({
					url:'/pages/details/details?pid=' + num
				})
			}
		}
	}
</script>

<style lang="scss">
	.icon {
		width: 180rpx;
		margin-left: -1* $uni-spacing-row-base;
		margin-right: $uni-spacing-row-base;
	}

	.title {
		//文字只显示2行,溢出内容用省略号代替
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.price {
		font-weight: bold;
		margin-top: $uni-spacing-col-sm;
		color: $uni-color-primary;
		font-size: $uni-font-size-lg;
	}

	.bottom {
		flex-direction: row;
		align-items: center;
		font-size: $uni-font-size-sm + 1;
		color: $uni-text-color-grey;

		.tag {
			padding: 0;
		}
	}
</style>
